<template>
	<view>


		<view class="display">
			<view class="left" :style="{height:windowHeight+'vh'}">
				<block v-for="(item,index) in serviceList" :key="index">
					<view @click="selLeft(index,item.pid,item.classificationName)" :class="leftIndex == index ? 'sel-left ' : 'no-sel-left'">
						<view class="activeLine">

						</view>
						{{item.classificationName}}
					</view>
				</block>
			</view>
			<view class="right">
				<view class="font-weight">
					{{classifyName}}
				</view>
				<view class="productClassification flex-wrap-flex-start">

					<view class="flex-column classPadding " v-for="(item,i) in classifyList" :key="i"
						@click="classifyFn(item)">


						<view style="color: #fff;font-size: 36rpx;">
							<image class="avaterIcon" :src="item.img" mode=""></image>
						</view>
						<view style="color: rgb(0, 0, 0);font-size: 24rpx;">
							{{item.name}}
						</view>


					</view>

				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {

		mapMutations
	} from 'vuex'
	import {
		mapState
	} from 'vuex'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

				imgUrl: this.$imgUrl,

				userInfo: uni.getStorageSync("userInfo"),

				name: '',

				cateList: [],
				leftIndex: '',

				list: [],

				windowHeight: '100',
				serviceList: [],
				classifyList: [],
				selectServiceList: [],
				// 套餐列表
				packageList: [],
				categories: '',
				// 套餐数组
				packageArr: [],
				statusId: '',
				classifyName:'',
				type:''
			}
		},

		onLoad(options) {
			 this.type=options.type
             this.init(options.type)
		},

		onShow() {


		},
		computed: {


		},
		methods: {
			selLeft(index, pid,name) {
				console.log(index)
				this.leftIndex = index
				this.classifyName=name
				this.secondaryClassify(pid)
				

			},
			classifyFn(item){
				console.log(item)
				uni.setStorageSync('tabClassIfy', item);
				this.$sun.navBack()
				
			},
			async init(type){
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {
							
						type: type,
						pid:0
							
					},
					headers: {
						'Authorization': this.userInfo.token
					}
							
				})
							
				if (resPoster.code == 0) {
					console.log(resPoster)
					this.serviceList=resPoster.data.list.map((item)=>{
						return {
							 classificationName:item.name,
							 pid:item.id
						}
					})
					if(this.serviceList.length){
						this.secondaryClassify(this.serviceList[0].pid)
						this.classifyName=this.serviceList[0].classificationName
					}
	
				} else {
							
					this.$sun.toast(resPoster.msg, 'none')
				}
			},
			async secondaryClassify(pid){
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {
							
						type: this.type,
						pid:pid
							
					},
					headers: {
						'Authorization': this.userInfo.token
					}
							
				})
							
				if (resPoster.code == 0) {
					console.log(resPoster)
					this.classifyList=resPoster.data.list.map((item)=>{
						return {
							 img:item.icon,
							 name:item.name,
							 id:item.id,
							 pid:item.pid,
							 type:item.type,
							 status:item.status
						}
					})
				
				} else {
							
					this.$sun.toast(resPoster.msg, 'none')
				}
			}


		}
	}
</script>

<style lang="scss">
	.provide-project {
		border-top: 2rpx solid #f4f4f4;
		background-color: #fff;
		padding: 20rpx 0;
		margin: 0px 10px;

		image {
			width: 192rpx;
			height: 192rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}

		// 右侧剩余宽度
		.remaining-width {
			width: calc(100% - 198rpx);

			button {
				border-radius: 76rpx;
				background-color: #406eff;
				color: #406eff;
				width: 150rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 28rpx;
				padding: 0rpx;
				margin: 0rpx;
			}

			.reservation-border {
				border: 2rpx solid #FF7B15;

				.reservation-img {
					width: 32rpx;
					height: 32rpx;
					background-color: #FF7B15;

					image {
						height: 30rpx;
					}
				}

				.reservation-text {
					margin: 0 10rpx;
					color: #EC724C;
					font-size: 24rpx;

				}
			}

			.bj-time {
				padding: 2rpx 16rpx 2rpx 6rpx;
				border-radius: 12rpx;
				background: linear-gradient(92deg, #3A2800 4.83%, #563600 96.02%);

				.m-bottom4 {
					margin-bottom: 4rpx;
				}
			}
		}
	}

	.classPadding {
		padding: 26rpx 36rpx 26rpx 7rpx;

		.avaterIcon {
			width: 102rpx;
			height: 102rpx;
			margin-bottom: 14rpx;
		}

		// 这里选择 .productClassification 的第 3n 个 .classPadding 子元素
		&:nth-child(4n) {
			padding-right: 0 !important;
		}
	}

	.shop-name {
		height: 80rpx;
		margin-bottom: 8rpx;
		font-size: 32rpx;
	}

	.shop-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}

	.version {
		width: 240rpx;
	}

	.index-54 {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		z-index: 99;
		// left: 93rpx;
		// top: 93rpx;
	}

	.frame {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.productClassification {
		border-radius: 20rpx;
		margin-top: 36rpx;
		background-color: #fff;

		.avaterIcon {
			width: 102rpx;
			height: 102rpx;
			margin-bottom: 14rpx;
			border-radius: 50%;
		}
	}

	.right {
		width: 580rpx;
		padding: 20rpx;

		.fixed-bj {
			z-index: 9;
			width: 100%;
			height: 200rpx;
			position: fixed;
			bottom: 0;
			left: 82rpx;
		}

		.confirm-btn {
			color: #fff;
			font-size: 36rpx;
			border-radius: 20rpx;
			background: #1890ff;
			width: 464rpx;
			height: 100rpx;
		}
	}

	.no-sel-left {
		text-align: center;
		padding: 30rpx 10rpx;

		color: #757575;
	}

	.sel-left {
		position: relative;
		background-color: #FFFFFF;
		text-align: center;
		padding: 30rpx 10rpx;
		color: #406eff;


		.activeLine {

			position: absolute;
			
			
			width: 10rpx;
			left:0;
			transform: translateX(-50%);
			height: 40rpx;
			background-color: #406eff;
		}

	}


	.left {
		width: 170rpx;
		background-color: #f7f7f7;
	}

	page {
		background-color: #FFFFFF;
		padding-top: 20rpx;
	}

	.search {
		width: 700rpx;
		background-color: #F7F7F7;
		padding: 16rpx 20rpx;
		border-radius: 100rpx;
		margin: 0 25rpx 20rpx;

		>input {
			width: 520rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}
</style>